<!--
 * @Description: 
 * @Author: your name
 * @version: 
 * @Date: 2024-05-08 14:49:38
 * @LastEditors: your name
 * @LastEditTime: 2024-05-08 16:38:14
-->
<template>
  <div class="app-container">
    <div class="left-panel">
      <LineList />
    </div>
    <div class="main-view">
      <div id="cesium-container"></div>
    </div>
    <div class="right-panel">
      <StationList />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, onBeforeUnmount } from 'vue'
import { useMetroStore } from '@/store/metroStore'
import { renderTrains } from '@/utils/cesiumUtils'
import LineList from '@/components/LineList.vue'
import StationList from '@/components/StationList.vue'
import * as Cesium from 'cesium'

const metroStore = useMetroStore()
const viewer = ref(null)

const cleanupTrains = ref(null)

onMounted(async () => {
  try {
    await metroStore.fetchData()
    viewer.value = new Cesium.Viewer('cesium-container', {
      animation: false,
      baseLayerPicker: false,
      shouldAnimate: true,
    })
    
    if (metroStore.lines.length > 0) {
      cleanupTrains.value = renderTrains(viewer.value, metroStore.lines[0].id)
    }
  } catch (error) {
    console.error('Cesium initialization failed:', error)
  }
})

onBeforeUnmount(() => {
  if (cleanupTrains.value) {
    cleanupTrains.value()
  }
  if (viewer.value) {
    viewer.value.destroy()
    viewer.value = null
  }
})
</script>

<style>
.app-container {
  display: flex;
  width: 100vw;
  height: 100vh;
}
.left-panel,
.right-panel {
  width: 200px;
  background: #f5f5f5;
}
#cesium-container {
  flex-grow: 1;
  height: 100%;
}
</style>
